<template>
  <div class="main-app">
    <el-form ref="form" :model="form" :rules="rules" label-width="260px">
      <el-row>
        <el-form-item label="模板选择:">
          <el-select v-model="form.name" filterable placeholder="请选择" style="width: 90%" clearable :disabled="isView"
                     @change="wasteListChange"
          >
            <el-option v-for="item in wasteList" :key="item.id" :label="item.name" :value="item.id" >
               <span style="float: left">{{ item.name }}</span>

            <span style="float: right; color: #8492a6; font-size: 13px ;width: 30px;"> {{item.physicalName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px ;margin-right: 50px;width: 40px;">{{ item.codeId }}  </span>
             <span style="float: right; color: #8492a6; font-size: 13px ;margin-right: 30px;">{{ item.characteristicContent }}  </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-col :span="11">
          <el-form-item label="废物名称:" prop="name">
            <el-input v-model="form.name" clearable :disabled="isView" />

          </el-form-item>
          <el-form-item label="废物类别:" prop="type">
            <el-select v-model="form.type" filterable style="width: 100%;" placeholder="请选择" clearable :disabled="isView"
                       @change="typeChange"
            >
              <el-option v-for="item in typeOptions" :key="item.code" :label="item.value" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="危险特性:">
            <el-input v-model="form.category" disabled />
          </el-form-item>

          <!-- <el-form-item label="容器类别:" prop="containerType">
            <el-radio-group v-model="form.containerType" :disabled="isView">
              <el-radio v-for="(item, index) in containerOptions" :key="index" :label="item.value">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="主要成分:" prop="mainComponents">
            <el-input v-model="form.mainComponents" clearable :disabled="isView" />
          </el-form-item>
          <el-form-item label="废物形态:" prop="physical">
            <el-radio-group v-model="form.physical" :disabled="isView">
              <el-radio v-for="(item, index) in physicalOptions" :key="index" :label="item.value">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="禁忌与应急措施:" prop="safetyPrecautions">
            <el-input v-model="form.safetyPrecautions" clearable :disabled="isView" />
          </el-form-item> -->

          <!-- <el-form-item label="危险标语:" prop="termId">
            <el-select v-model="form.termId" filterable placeholder="请选择" clearable :disabled="isView" style="width: 100%"
                       @change="termContentChange"
            >
              <el-option v-for="item in termContentOptions" :key="item.id" :label="item.content" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="状态:" prop="status">
            <el-radio-group v-model="form.status" :disabled="isView">
              <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="危害成分:">
            <el-input v-model="form.substance" clearable :disabled="isView" />
          </el-form-item>
          <el-form-item label="废物代码:" prop="wasteCode">
            <el-select v-model="form.wasteCode" filterable placeholder="请选择" clearable :disabled="isView" style="width: 100%"
                       @change="wasteCodeChange"
            >
              <el-option v-for="item in wasteOptions" :key="item.code" :label="item.code" :value="item.code" />
            </el-select>
          </el-form-item>

          <el-form-item label="来源及生产工序:" prop="sourceProcess">
            <el-select v-model="form.sourceProcess" filterable placeholder="请选择" clearable :disabled="isView" style="width: 100%">
              <el-option v-for="item in sourceOptions" :key="item.code" :label="item.value" :value="item.code" />
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="禁忌与应急措施:" prop="safetyPrecautions">
            <el-select v-model="form.safetyPrecautionsId" filterable placeholder="请选择" clearable :disabled="isView"
                       style="width: 100%" @change="safetyPrecautionsChange"
            >
              <el-option v-for="item in safetyPrecautionsOptions" :key="item.id" :label="item.content"
                         :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="安全告知卡:">
            <el-select v-model="form.securityCardCode" filterable placeholder="请选择" clearable :disabled="isView"
                       style="width: 100%" @change="securityCardChange"
            >
              <el-option v-for="item in safetyNotificationCardOptions" :key="item.code" :label="item.value"
                         :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="安全告知卡附件:">
            <el-form-item>
              <el-button type="primary" icon="el-icon-view" @click="
                ViewFile('废物安全告知卡附件', `${form.securityCardUrlList}`)
              "
              >
                点击查看附件</el-button>
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="width: 92%;">
        <el-form-item label="描述:" :disabled="isView">
          <el-input v-model="form.describe" type="textarea" :rows="4" clearable :disabled="isView" />
        </el-form-item>

      </el-row>
    </el-form>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" :disabled="isView" @click="save">提交</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="dialog_diy">
      <el-dialog :visible.sync="dialogVisible" width="70%" style="margin-top: -100px">
        <div slot="title" style="background: #1890ff; color: white">
          <div style="padding: 15px 20px">{{ picTitle }}</div>
        </div>
        <el-form ref="form" style="margin-top: 15px" :model="form">
          <div class="block">
            <el-carousel height="700px" style="text-align: center">
              <el-carousel-item v-for="item in urls" :key="item">
                <el-image style="height: 100%; width: 100%" fit="scale-down" :src="item" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-row style="margin-top: 20px; text-align: center">
            <el-form :inline="true" class="form-inline">
              <el-form-item>
                <el-button @click="dialogVisible = false">返 回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-form>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {
  EquipmentStatus,
  ContainerType,
  PhysicalProperties,
  WasteCharacteristics,
} from "../../../utils/resource";
import {
  getWasteTypeList,
  getWasteCodeList,
  getSourceProcessList,
  addWasteInformation,
  getWasteInformationById,
  getWasteTermList,
  GetAllHWSafetyprecautionsList,
  GetWasteInformationListForProductAsync,
  getDictionaryListByType
} from "../../../api/system";
export default {
  data() {
    return {
      form: {
        category: "",
        type: "",
        name: "",
        // containerType: "0",
        physical: "0",
        // safetyPrecautionsId: "",
        // safetyPrecautions: "",
        wasteCode: "",
        substance: "",
        sourceProcess: "",
        mainComponents: "",

        describe: "",
        status: "0",

        securityCardCode: "",
        securityCardUrl: "",
        securityCardUrlList: [],
        // termContent: "",
        // termId: ""
      },
      wasteList: [],
      typeOptions: [],
      wasteOptions: [],
      sourceOptions: [],
      // termContentOptions: [],
      // safetyPrecautionsOptions: [],
      safetyNotificationCardOptions: [],

      statusOptions: EquipmentStatus,
      containerOptions: ContainerType,
      physicalOptions: PhysicalProperties,
      rules: {
        name: [{
          required: true,
          message: "请输入废物名称",
          trigger: "blur"
        }],
        substance: [{
          required: true,
          message: "请输入危害成分",
          trigger: "blur"
        }],
        describe: [{
          required: true,
          message: "请输入描述",
          trigger: "blur"
        }],
        safetyPrecautions: [{
          required: true,
          message: "请选择禁忌与应急措施",
          trigger: "change"
        }],
        securityCardCode: [{
          required: true,
          message: "请选择安全告知卡",
          trigger: "change"
        }],
        type: [{
          required: true,
          message: "请选择废物类别",
          trigger: "change"
        }],
        // containerType: [{
        //   required: true,
        //   message: "请选择容器类别",
        //   trigger: "change"
        // }],
        physical: [{
          required: true,
          message: "请选择废物形态",
          trigger: "change"
        }],
        wasteCode: [{
          required: true,
          message: "请选择废物代码",
          trigger: "change"
        }],
        status: [{
          required: true,
          message: "请选择状态",
          trigger: "change"
        }],
        // termId: [{
        //   required: true,
        //   message: "请选择废物标语",
        //   trigger: "change"
        // }],
        sourceProcess: [{
          required: true,
          message: "请选择来源及生产工序",
          trigger: "change",
        }],
      },
      id: "",
      codeContent: "",
      categoryId: "",
      categoryContent: "",
      content: "",
      dialogVisible: false,

      urls: [
        // "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        // "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        // "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        // "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        // "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        // "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        // "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
      ],
      picTitle: "废物安全告知卡附件",
    };
  },
  computed: {
    isView() {
      return this.$route.name === "baseinformation-view";
    },
  },
  async created() {
    const {
      data
    } = await GetWasteInformationListForProductAsync();
    this.wasteList = data;
    this.wasteList.forEach(item=>{
      let index=PhysicalProperties.findIndex(T=>{

        return T.value===item.physicalProperties
      })
      if(index>=0){
         item. physicalName=PhysicalProperties[index].label;
      }else{
         item. physicalName="未知形态";
      }

    })
    var searchData = {
      searchParam: JSON.stringify({
        // "Content":"字典内容",
        "Status": "0" // (状态  0:启用 1:禁用)
      }),

    };
    Promise.all([
      await getWasteTypeList(),
      await getSourceProcessList(),
      await getWasteTermList(),
      await GetAllHWSafetyprecautionsList(searchData),
      await getDictionaryListByType("104")
    ])
      .then((result) => {
        this.typeOptions = result[0].data;

        this.sourceOptions = result[1].data;
        // this.termContentOptions = result[2].data;
        // this.safetyPrecautionsOptions = result[3].data;
        this.safetyNotificationCardOptions = result[4].data;
      })
      .then(async() => {
        const {
          id
        } = this.$route.params;
        if (id) {
          await this.getWasteInformationById(id);
          this.id = id;
        }
      });
  },
  methods: {
    async wasteListChange(value) {
      await this.getWasteInformationById(value);
    },
    termContentChange(e) {
      var _this = this;
      var obj = _this.termContentOptions.find(item => {
        return item.id === e
      })
      if (obj) {
        _this.form.termContent = obj.content;
        _this.form.termId = obj.id;
      }
    },
    safetyPrecautionsChange(e) {
      var _this = this;

      var obj = _this.safetyPrecautionsOptions.find(item => {
        return item.id === e
      })
      if (obj) {
        _this.form.safetyPrecautions = obj.content;
        _this.form.safetyPrecautionsId = obj.id;
      }
    },
    securityCardChange(e) {
      var _this = this;
      var obj = _this.safetyNotificationCardOptions.find(item => {
        return item.code === e
      })
      if (obj) {
        _this.form.securityCardUrlList = obj.pictureUrlList;
        _this.form.securityCardCode = obj.code;
        _this.form.securityCardName = obj.value;
        _this.form.securityCardUrl = obj.customOne;
      }
    },
    async getWasteInformationById(id) {
      const {
        data
      } = await getWasteInformationById(id);
      this.form.name = data.name;
      this.form.type = data.categoryId;
      this.form.sourceProcess = data.processId;
      this.codeContent = data.codeContent;
      this.categoryContent = data.categoryContent;
      this.categoryId = data.characteristicContent;
      this.form.substance = data.hazardousSubstancesName;
      // this.form.containerType = data.containerCategory;
      this.form.physical = data.physicalProperties;
      this.form.mainComponents = data.mainComponents;
      // this.form.safetyPrecautions = data.safetyPrecautions;
      // this.form.safetyPrecautionsId = data.safetyPrecautionsId;

      this.form.describe = data.describe;
      this.form.status = data.status.toString();

      this.form.securityCardCode = data.securityCardCode;
      this.form.securityCardUrl = data.securityCardUrl;
      this.form.securityCardUrlList = data.securityCardUrlList;
      // this.form.termContent = data.termContent;
      // this.form.termId = data.termId;

      await this.typeChange();
      this.wasteCodeChange(data.codeId);
    },
    viewPDF() {
      this.dialogVisible = true;
    },
    async ViewFile(title, url) {
      if (!url) {
        this.$message.error("暂无数据");
        return
      }
      this.picTitle = title;
      this.urls = [];
      this.urls = url.split(",");

      this.dialogVisible = true;
    },
    async typeChange() {
      const {
        data
      } = await getWasteCodeList(this.form.type);
      console.log(data);
      this.wasteOptions = data;
      this.categoryContent = this.typeOptions.find(
        (p) => p.code === this.form.type
      ).value;
    },
    wasteCodeChange(id) {
      if (id) {
        const {
          value
        } = this.wasteOptions.find((p) => p.code === id);

        if (value) {
          var valueList = value.split(',')
          var categoryName = "";
          valueList.forEach(item => {
            var obj = WasteCharacteristics.find((p) => p.value === item)
            if (obj) {
              categoryName += obj.label + ','
            }
          })

          categoryName = categoryName.substring(0, categoryName.length - 1)

          this.form.category = categoryName;

          this.categoryId = value;
          this.codeContent = value;
          this.form.wasteCode = id;
        }
      } else {
        const {
          value
        } = this.wasteOptions.find(
          (p) => p.value === this.form.wasteCode
        );
        this.form.category = WasteCharacteristics.find(
          (p) => p.value === value
        ).label;
        this.categoryId = value;
        this.codeContent = value;
      }
    },
    save() {
      this.$refs["form"].validate(async(valid) => {
        if (valid) {
          let data = {
            name: this.form.name,
            categoryId: this.form.type,
            codeId: this.form.wasteCode,
            processId: this.form.sourceProcess,
            processContent: this.sourceOptions.find(p => p.code === this.form.sourceProcess).value,
            codeContent: this.codeContent,
            categoryContent: this.categoryContent,
            characteristicId: this.categoryId,
            characteristicContent: this.form.category,
            hazardousSubstancesName: this.form.substance,
            // containerCategory: this.form.containerType,
            physicalProperties: this.form.physical,
            chemicalName: this.form.chemicalName,
            mainComponents: this.form.mainComponents,

            describe: this.form.describe,
            status: this.form.status.toString(),

            SecurityCardCode: this.form.securityCardCode,
            SecurityCardName: this.form.securityCardName,
            SecurityCardUrl: this.form.securityCardUrl,
            // SafetyPrecautions: this.form.safetyPrecautions,
            // SafetyPrecautionsId: this.form.safetyPrecautionsId,
            // TermContent: this.form.termContent,
            // TermId: this.form.termId
          };

          let message = "";
          if (!this.id) {
            message = "新增";
          } else {
            data = Object.assign({
              id: this.id
            }, data);
            message = "修改";
          }

          // return;
          await addWasteInformation(data);
          this.$notify({
            title: "成功",
            message: `废物基本信息${message}成功`,
            type: "success",
            duration: 3000,
          });
          this.$router.push("/system/baseinformation");
        }
      });
    },
    cancel() {
      this.$router.push("/system/baseinformation");
    },
  },
};
</script>
